<html>
<head>
    <script src="/public/js/jquery-2.1.1.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="/public/static/bast/bootstrap.css">-->
    <link rel="stylesheet" type="text/css" href="/public/css/common.css">
    <link rel="stylesheet" type="text/css" href="/public/css/seller_center.css">
    <link rel="stylesheet" type="text/css" href="/public/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/public/css/dialogalbumlist.css">
    <!--<script src="/public/admin/js/art_dialog.source.js"></script>-->
    <!--<script src="/public/admin/js/iframe_tools.source.js"></script>-->
    <!--<script src="/public/static/blue/bootstrap/js/bootstrap.js"></script>-->
    <style>
        .dislog-style ul {
            width: 100%;
            margin: 0;
        }
        .mytable{border-bottom: solid 1px #DDD;}
        .dislog-style ul li span {
            display: inline-block;
            width: 60px;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        .dislog-style ul li input {
            width: 200px;
            height: 30px;
        }
        .album-img {
            margin-top: 5px;
            display: inline-block;
            border-radius: 50px;
            background-color: #FFF;
            height: 20px;
            width: 20px;
            line-height: 20px;
            text-align: center;
        }
        .album-img-active {
            margin-top: 5px;
            display: inline-block;
            border-radius: 50px;
            background-color: #999;
            height: 20px;
            width: 20px;
            line-height: 20px;
            text-align: center;
            color: #fff;
        }
        .pagination ul li {
            width: auto !important;
            margin-left: 0px !important;
            height: auto !important;
        }
        #turn-ul {
            margin-top: 0;
            position: absolute;
            left: 25%;
            bottom: 0px;
        }
        .pagination-right ul li {
            margin-bottom: 0 !important;
        }
        .input-file{
            position: absolute;
            top: 9px !important;
            right: 9px !important;
            height: 30px !important;
            width: 94px !important;
            filter: alpha(opacity : 0) !important;
            opacity: 0 !important;
            line-height:auto;
        }
        #turn-ul{
            position: static;
        }
        .upload-con {
            top: 50px;
            right: 0px;
        }
        .album-title{
            display: inline-block;
            white-space: nowrap;
            width: 60%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .img-li{
            line-height: 116px;
            border:2px  solid #eee;
            text-align:center;
        }
        .img-li img:first-child{
            display: inline-block !important;
            vertical-align: middle !important;
            max-width: 100% !important;
            max-height: 100% !important;
            height: auto !important;
            width:auto !important;
            border:none !important;
        }
        .img-li  .icon_ok{
            bottom:0;
            right:0;
        }
		.list_goods_name {display:block;width:105px; height: 25px; line-height: 25px; overflow: hidden;padding:0 5px;}
		.dialog_body article ul li {height:145px !important;cursor: pointer;}
    </style>
</head>
</html>
<body>
<table class="mytable">
    <tr>
        <th width="45%"></th>
        <th width="9%"></th>
        <th width="14%"></th>
        <th width="12%" ><!-- style="padding-right: 8px;" -->
        </th>
        <th width="12%" style="padding-right: 8px;cursor:pointer;">
           </th>
    </tr>
</table>
<div class='dialog_main'>
    <div class="dialog_body">
        <aside style="border-right: solid 1px #DDD;">
            <ul id="album_list">
                {volist name="cate" id="c"}
                    <li onclick="SelectAlbumByType(this,'{$c.cate_id}')" data-cate_id="{$c['cate_id']}"><b class="album-title">{$c['cate_name']}</b><span class="album-img-active">{$c['goods_count']}</span></li>
                {/volist}
            </ul>
        </aside>
        <article>
            <ul id="albumList" style="overflow: hidden; width: 100%;"></ul>
            <div style="clear: both;"></div>
        </article>
    </div>
    <footer style="border-top:1px solid #DDD;background-color:#FFF;">
        <span id="select_count"></span>
        <input type="button" value="确认" id="confirm" />
    </footer>
</div>
<!-- 公共的操作提示弹出框 common-success：成功，common-warning：警告，common-error：错误，-->
<div class="common-tip-message js-common-tip">
    <div class="inner"></div>
</div>
<script src="/public/static/js/ajax_file_upload.js" type="text/javascript"></script>
<script type="text/javascript" src="/public/static/js/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="/public/static/js/jquery.fileupload.js" charset="utf-8"></script>
<script type="text/javascript">
    var goods_array = new Object();
    goods_array["goods_id"] = new Array();
    goods_array["img_path"] = new Array();
    //商品选择数量
    var count = 0;
    function showTip(msg,flag){
        var curr_class = "common-"+flag;
        $(".js-common-tip").removeClass("common-success common-warning common-error")
            .addClass(curr_class)
            //		.css("top",$(window).scrollTop()/2)
            .fadeIn(400)
            .children().text(msg);
        setTimeout("$('.js-common-tip').fadeOut()",2000);
    }
    //分类查询
    function SelectAlbumByType(obj,id) {
        $(".select_type").removeClass("select_type");
        $(obj).addClass("select_type");
        $("#select_count").css("visibility", "hidden");
        $("#confirm").removeClass("input_blue");
        LoadingInfo(id);
    }
    //查询商品列表
    function LoadingInfo(id) {
        goods_array["goods_id"] = new Array();
        goods_array["img_path"] = new Array();
        $.ajax({
            type : "post",
            url : "{:url('admin/article/add_article_goods')}",
            data : {
                "cate_id" : id
            },
            success : function(data) {
                count = 0;
                $("#select_count").css("visibility", "hidden");
                var html = '';
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        html += "<li class='img-li'title='"+data[i]["goods_name"]+"'data-id="
                            + data[i]["goods_id"]
                            + " img_path='"
                            + data[i]['img_cover']
                            + "' onclick='select_img(this,"
                            + data[i]["goods_id"]
                            + ")'><img src='"
                            + data[i]["img_cover"]
                            + "' alt='"
                            + data[i]["goods_name"]
                            + "' />"
							+ "<span class='list_goods_name'>"
						    + data[i]["goods_name"]
						    + "</span>";
                        html += "<img src='/public/static/images/icon_ok.png' class='icon_ok' /></li>";
                    }
                } else {
                    html += '<div class="none_info">暂无符合条件的数据记录！</div>';
                }
                $("#albumList").html(html);
            }
        });
    }
    function refreshCount(){
        if (count == 0) {
            $("#select_count").css("visibility", "hidden");
            $("#confirm").removeClass("input_blue");
        } else {
            $("#select_count").css("visibility", "visible");
            $("#confirm").addClass("input_blue");
        }
            $("#select_count").text("已选择" + count + "个商品");//张照片
            $("#select_count").css("color", "black");
    }
    function select_img(obj) {
        var id = $(obj).attr("data-id");
        var path = $(obj).attr("img_path");
        if ($(obj).hasClass("select_img")) {
            $(obj).removeClass("select_img");
            $(obj).find(".icon_ok").css("display", "none");
            //删除数组中的元素
            var id_index = $.inArray(id, goods_array["goods_id"]);
            goods_array["goods_id"].splice(id_index, 1);
            goods_array["img_path"].splice(id_index, 1);
            --count;
        } else {
            $(obj).addClass("select_img");
            $(obj).find(".icon_ok").css("display", "block");
            //在数组中`添加本元素id
            goods_array["goods_id"].push(id);
            goods_array["img_path"].push(path);
            ++count;
        }
        refreshCount();
    }
    $("#confirm").click(function() {
        if ($("#confirm").hasClass("input_blue")) {
            var id_arr = goods_array["goods_id"].join(",");
            parent.document.getElementById("goods_id_array").value = id_arr;
            parent.document.getElementById("goods_count").innerHTML = count;
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
    });
    /**
     *添加图片框体切换
     */
    function addImgBox() {
        if ($("#uploader").is(":hidden")) {
            $("#uploader").show();
        } else {
            $("#uploader").hide();
        }
    }
    /**
     * 处理图片路径
     */
    function __IMG(img_path){
        var path = "";
        if(img_path.indexOf("http://") == -1 && img_path.indexOf("https://") == -1){
            path = "__ROOT__"+"\/"+img_path;
        }else{
            path = img_path;
        }
        return path;
    }
</script>
</body>